<template>
	<view id="chapter" class="page-container" :class="{'dark':theme=='dark'}">
		<view class="book_brief">
			<view class="top" :style="{backgroundColor:topColor}">
				<view class="image">
					<image :src="bookBrif.book_cover"></image>
				</view>
				
				<view class="detail">
					<text>{{bookBrif.book_name}}</text>
					<text class="text">{{bookBrif.book_author}}[著]</text>
					<text class="text">最近更新：{{bookBrif.book_updtime.replace(" 00:00:00", "")}}</text>
					<text class="text">{{bookBrif.book_category2}}·{{bookBrif.score}}分·{{bookBrif.mood}}字</text>
					<text class="text">最新:{{bookBrif.newest}}</text>
				</view>
			</view>
			
		</view>
		
		<view class="book_item">
			<view class="brief">
				<u-read-more toggle=true ref="uReadMore">
					<u-parse :html="brief" :selectable="true"></u-parse>
				</u-read-more>
				
			</view>
			
			
			<view class="chapter_list">
				<text class="list" v-for="(item, index) in bookChapter" :key="index"
				@click="readBook(item.chapter_bookid, item.chapter_chapterId)">
					{{item.chapter_name}}
				</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { findDetails, findChapter } from '../../util/request/book.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				book_id: 0,
				bookBrif: {},
				bookChapter: [],
				
				topColor: "",
				
				brief: ""
			}
		},
		
		computed:{
			theme() {
				return store.state.novel.theme
				
			}
		},
		
		onLoad(option) {
			this.book_id = option.book_id || 8446;
			this.getBookDetail();
			this.getChapterList();
			
		},
		onReady() {
			let that = this;
			
		},
		onShow() {
			
		},
		methods:{
			
	
			readBook(bookId, chapterId) {
				uni.navigateTo({
					url: "../readbook/index?book_id="+bookId+"&chapter_chapterId="+chapterId
				})
			},
						
			/**
			 * 文章介绍
			 */
			getBookDetail() {
				let that = this;
				findDetails({ book_id: that.book_id}).then(res=>{
					that.bookBrif = res.msg;
					
					//简介展开 收起
					that.brief = that.bookBrif.book_brief
					that.$nextTick(() => {
										that.$refs.uReadMore.init();
									})
												
					setTimeout(function(){
						that.categoryType(that.bookBrif.book_category2);
					},0)
				})
			},
			/**
			 * 文章目录
			 */
			getChapterList() {
				let that = this;
				// book_type
				// book_id
				// book_category_order
				
				findChapter({ book_type: 1, book_id: that.book_id, book_category_order: 1})
				.then(res=>{
					that.bookChapter = res;
				})
			},
			
			
			categoryType(name) {
				console.log(name)
				let that = this;
				switch(name){
					case "军事":
					case "都市":
					case "武侠":
					case "悬疑":
					case "玄幻":
					that.topColor = "#4a5362";
					break;
					
					case "古言":
					case "现言":
					that.topColor = "#ffadad";
					break;
					
					default:
					that.topColor = "#6f78a7";
					break;
					
				}
				
				console.log(that.topColor)
				uni.setNavigationBarColor({
				    frontColor: '#ffffff',
				    backgroundColor: that.topColor,
				  
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	#chapter{
		font-size: 24rpx;
		
		.book_brief{
			height:300rpx;
			
			.image{
				
				image{
					height:220rpx;
					width:180rpx;
				}
			}
			
			.top{
				display: flex;
				flex-direction: row;
				color: #f2f2f2;
				padding: 20rpx;
				padidng-top:0;
				.detail{
					display: flex;
					flex-direction: column;
					margin-left:20rpx;
					.text{
						margin-top:12rpx;
					}
				}
			}
			
			// background-color: ;
		}
		
		.book_item{
			padding: 10rpx 30rpx;
			
			.brief{
				background-color: #fff;
				padding-left:10rpx;
			}
			
			.chapter_list{
				background-color: #fff;
				margin-top:10rpx;
				padding:20rpx 0;
				.list{
					display: inline-block;
					padding-left:10rpx;
					width:46%;
					height: 84rpx;
					font-size:28rpx;
					margin-left:20rpx;
				}
			}
			
		}
	}
</style>
